<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Browser Update Statistics</title>
<link rel="stylesheet" href="sank.css" type="text/css" />
<style>
.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}

.node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}



.link:hover {
  stroke-opacity: .5;
}

.node text {
  text-shadow: none;
  font-family: 'Open Sans', sans-serif;
}

.link {
  fill: none;
  stroke: #000;
  stroke: url(#grad1);
  stroke-opacity: 0.3;
}

.grad1Stop1 { stop-color: #000; }
.grad1Stop2 { stop-color: #fff; }

.hnode {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.3;
  background-size: 120px;
  

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

}

#chart {
  height: 500px;
  position:relative;
}

</style>
<body>
<h1>Test</h1>
<div id="chart"></div>

<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
<script src="sankey.js"></script>


<script>

var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 700,
    height = 500;

var format = function(d) { return d; };
var    colors = {"IE":"#6D95B9"/*"#00CCFF"*/,"Firefox":"#F2951F","Opera":"#CC0F16",Safari: "#2abce0","Chrome":"#4CB849"};
var    bs = {"IE":"ie","Firefox":"ff","Opera":"op",Safari:"sa","Chrome":"ch"};

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var defs = svg.append( 'defs' );
var grad = defs.append( 'linearGradient' )
                                   .attr( 'id', 'grad1' )
                                   .attr( 'x1', '0' )
                                   .attr( 'x2', '1' )
                                   .attr( 'y1', '0' )
                                   .attr( 'y2', '0' );
grad.append( 'stop' ).attr( 'class', 'grad1Stop1' ).attr( 'offset', '1%' );
grad.append( 'stop' ).attr( 'class', 'grad1Stop2' ).attr( 'offset', '100%' );


var elc = d3.select("#chart");

var sankey = d3.sankey()
    .nodeWidth(55)
    .nodePadding(10)
    .size([width, height]);

var path = sankey.link();
var data={
"nodes":[
{"name":" "},
{"name":"IE"},
{"name":"Firefox"},
{"name":"Opera"},
{"name":"Safari"},
{"name":"Chrome"},
{"name":" "},
{"name":"IE"},
{"name":"Firefox"},
{"name":"Opera"},
{"name":"Safari"},
{"name":"Chrome"}
],
"links": [
    {"source":1,"target":11,"value":461529},{"source":1,"target":7,"value":406763},{"source":1,"target":8,"value":404076},{"source":2,"target":8,"value":171977},{"source":1,"target":9,"value":55600},{"source":4,"target":10,"value":40309},{"source":1,"target":10,"value":26750},{"source":3,"target":9,"value":23515},{"source":2,"target":11,"value":21453},{"source":4,"target":11,"value":17041},{"source":4,"target":8,"value":15501},{"source":3,"target":11,"value":10945},{"source":3,"target":8,"value":10114},{"source":2,"target":9,"value":7323},{"source":5,"target":11,"value":7152},{"source":2,"target":10,"value":5962},{"source":2,"target":7,"value":5283},{"source":3,"target":7,"value":5005},{"source":4,"target":9,"value":4058},{"source":4,"target":7,"value":1815},{"source":5,"target":8,"value":1792},{"source":3,"target":10,"value":1429}]
};

function run(data) {
  sankey
      .nodes(data.nodes)
      .links(data.links)
      .layout(32);

  var link = svg.append("g").selectAll(".link")
      .data(data.links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .style("stroke", function(d) { return d.color = colors[d.source.name]; })
      //.style("stroke","url(#grad1)")
      //.style("stroke","")
      .style("stroke-opacity", "")
      .sort(function(a, b) { return b.dy - a.dy; });

  link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

  var node = svg.append("g").selectAll(".node")
      .data(data.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) { return d.color = colors[d.name]; })      
    .append("title")
      .text(function(d) { return d.name + " "+ d.value; });
      
  var hnode = elc.selectAll(".hnode")
      .data(data.nodes)
      .enter().append("div")
      .attr("class", "hnode")
      .style("left", function(d) { return d.x +"px";})      
      .style("top", function(d) { return d.y+"px";})
      .style("height", function(d) { return d.dy+"px"; })
      .style("width", sankey.nodeWidth()+"px");
      //.style("background-color", function(d) { return d.color = colors[d.name]; })      
      //.style("background-image", function(d) { if (d.dy>50) return "url(../img/big/"+bs[d.name]+ ".png)"})      

  node.append("text")
      .attr("x", -6)
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".45em")
      .attr("text-anchor", "end")
      .attr("transform", null)
      .text(function(d) { return d.name; })
    .filter(function(d) { return d.x < width / 2; })
      .attr("x", 6 + sankey.nodeWidth())
      .attr("text-anchor", "start");
}
run(data);

</script>